<script setup lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

import { loginApi } from '@/api/login'

const router = useRouter()

const shell = ref<HTMLDivElement | null>(null)
const passwordInput = ref<HTMLInputElement | null>(null)
const beam = ref<HTMLDivElement | null>(null)

const form = ref<API.LoginParams>({
  account: '',
  password: ''
})

const showPassword = () => {
  shell.value.classList.toggle('show-password') // 切换body元素的类名，控制密码是否显示
  passwordInput.value.type = passwordInput.value.type == 'password' ? 'text' : 'password' // 切换密码输入框的类型
  passwordInput.value.focus() // 聚焦密码输入框
}

// 鼠标移动处理
const handleMouseMove = (e: MouseEvent) => {
  // 获取光束的位置和鼠标位置
  let rect = beam.value.getBoundingClientRect(); // 获取光束元素的位置信息
  let mouseX = rect.right + (rect.width / 2); // 光束的横坐标
  let mouseY = rect.top + (rect.height / 2); // 光束的纵坐标
  // 计算角度
  let rad = Math.atan2(mouseX - e.pageX, mouseY - e.pageY); // 计算鼠标和光束之间的角度
  let degrees = (rad * (20 / Math.PI) * -1) - 350; // 将弧度转换为角度
  // 设置根元素的样式变量
  shell.value.style.setProperty('--beamDegrees', `${degrees}deg`); // 设置根元素的样式变量，控制光束的旋转角度
}

onMounted(() => {
  shell.value?.addEventListener('mousemove', handleMouseMove)
})

onUnmounted(() => {
  shell.value?.removeEventListener('mousemove', handleMouseMove)
})

const submit = async () => {
  if (!form.value.account || !form.value.password) {
    ElMessage({
      message: '账号和密码不能为空',
      type: 'error',
    })
    return
  }
  const res: API.LoginResponse = await loginApi(form.value)
  if(!res) return
  ElMessage({
    message: '欢迎回来，' + res.account + '！',
    type: 'success',
  })
  localStorage.setItem('userInfo', JSON.stringify({
    name: res.name,
    account: res.account,
  }))
  router.push('/')
}

const openAgreement = () => {
  window.open('/agreement.html', '_blank')
}

</script>


<template>
  <div class="shell" ref="shell">
    <form @submit.prevent="submit">
      <h2>登录</h2>
      <div class="form-item">
        <label for="username">账号</label>
        <div class="input-wrapper">
          <input type="text" id="username" autocomplete="off" spellcheck="false" v-model="form.account" />
        </div>
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <div class="input-wrapper">
          <input type="password" id="password" autocomplete="off" autocapitalize="off"
            spellcheck="false" ref="passwordInput" v-model="form.password" />
          <button type="button" id="eyeball" @click.prevent="showPassword">
            <div class="eye"></div>
          </button>
          <div id="beam" ref="beam"></div>
        </div>
      </div>
      <button id="submit">登录</button>

      <div class="agreement">请自行阅读并同意《<span @click="openAgreement">Ikun用户协议</span>》</div>
    </form>
  </div>
</template>


<style scoped lang="scss">
* {
  box-sizing: border-box;
  transition: .2s;
}

.shell {
  --bgColor: white;
  --inputColor: black;
  --outlineColor: rgb(60, 115, 235);
  --border: black;
  &.show-password {
    --bgColor: rgba(0, 0, 0, 0.9);
    --inputColor: white;
    --border: rgb(255, 255, 255);
  }
}

/* 设置外层容器样式 */
.shell {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColor);
  overflow: hidden;
    &::before {
      content: '你干嘛~ 哎呦';
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 150px;
      color: var(--inputColor);
      transform: translate(-50%, -50%);
      filter: blur(10px);
    }
}

/* 设置表单样式 */
form {
  transform: translate3d(0, 0, 0);
  padding: 50px;
  border: 20px solid var(--border);
  border-radius: 10px;
  box-shadow: 10px 10px 10px #00000065;
}

form>*+* {
  margin-top: 15px;
}

.form-item>*+* {
  margin-top: 0.5rem;
}

/* 设置label, input, button样式 */
h2,
label,
input,
button {
  font-size: 2rem;
  color: var(--inputColor);
  font-family: '优设标题黑';
}

h2 {
  font-size: 4rem;
  margin: 0;
}

label:focus,
input:focus,
button:focus {
  outline-offset: 2px;
}

label::-moz-focus-inner,
input::-moz-focus-inner,
button::-moz-focus-inner {
  border: none;
}

/* 设置密码相关样式 */
label[id=password],
input[id=password],
button[id=password] {
  color: black;
}

/* 设置按钮样式 */
button {
  border: none;
}

[id=submit] {
  width: 100%;
  cursor: pointer;
  margin: 20px 0 0 2px;
  padding: 0.75rem 1.25rem;
  color: var(--bgColor);
  background-color: var(--inputColor);
  box-shadow: 4px 4px 0 rgba(30, 144, 255, 0.2);
}

[id=submit]:active {
  transform: translateY(1px);
}

/* 设置输入框包裹器样式 */
.input-wrapper {
  position: relative;
}

/* 设置输入框样式 */
input {
  padding: 0.75rem 4rem 0.75rem 0.75rem;
  width: 100%;
  border: 2px solid transparent;
  border-radius: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px black, inset 6px 6px 0 rgba(30, 144, 255, 0.2), 3px 3px 0 rgba(30, 144, 255, 0.2);
  // -webkit-appearance: none;
}

input:focus {
  outline-offset: 1px;
}

/* 设置显示密码时的输入框样式 */
.show-password input {
  box-shadow: inset 0 0 0 2px black;
  border: 2px dashed white;
}

.show-password input:focus {
  outline: none;
  border-color: rgb(255, 255, 145);
}

.agreement{
  font-size: 1rem;
  color: var(--inputColor);
  text-align: center;
  span{
    color: rgb(60, 115, 235);
    cursor: pointer;
    &:hover{
      text-decoration: underline;
    }
  }
}

/* 设置眼睛按钮样式 */
[id=eyeball] {
  --size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 50%;
  right: 0.75rem;
  border: none;
  background-color: transparent;
  transform: translateY(-50%);
}

[id=eyeball]:active {
  transform: translateY(calc(-50% + 1px));
}

.eye {
  width: var(--size);
  height: var(--size);
  border: 2px solid var(--inputColor);
  border-radius: calc(var(--size) / 1.5) 0;
  transform: rotate(45deg);
}

.eye:before,
.eye:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 100%;
}

.eye:before {
  width: 35%;
  height: 35%;
  background-color: var(--inputColor);
}

.eye:after {
  width: 65%;
  height: 65%;
  border: 2px solid var(--inputColor);
  border-radius: 100%;
}

/* 设置光束样式 */
[id=beam] {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  clip-path: polygon(100% 50%, 100% 50%, 0 0, 0 100%);
  width: 100vw;
  height: 25vw;
  z-index: 1;
  mix-blend-mode: multiply;
  transition: transform 200ms ease-out;
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(var(--beamDegrees, 0));
  pointer-events: none;
}

.show-password [id=beam] {
  background: rgb(255, 255, 145);
}
</style>